<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted } from "vue";
import {
  Search,
  Plus,
  EditPen,
  Delete,
  Refresh,
  CirclePlus
} from "@element-plus/icons-vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { patrolProjectTable } from "./utils/definition";
import addAndEditRootAialog from "./dialog/addAndEditRootAialog.vue";
const addAndEditRootShow = ref(false);
import { message } from "@/utils/message";
const name = ref("");
const treeList = ref([
  {
    id: 1,
    label: "Level one 1",
    children: null
  },
  {
    id: 2,
    label: "Level one 2",
    children: null
  },
  {
    id: 3,
    label: "Level one 3",
    children: null
  }
]);
const tree = ref(null);
const dialogTreeVisible = ref(false);
const dialogTableVisible = ref(false);
const { columns } = patrolProjectTable();
const defaultProps = {
  children: "children",
  label: "label"
};
const defaultExpandedkeys = ref([1]);
const pagination = reactive({
  pageSize: 20,
  currentPage: 1,
  pageSizes: [20, 40, 60],
  total: 0,
  align: "right",
  background: true,
  size: "default"
});
const lisQuery = reactive<any>({
  limit: 10,
  page: 1,
  dataSetName: ""
});
const tableListData = ref([
  {
    abilityCode: "cccc",
    abilityName: "xxxxxxxxx",
    dataType: "1"
  }
]);
const listLoading = ref(false);
const treeInfo = ref({});
const tableInfo = reactive<any>({});
const searchBtn = () => {
  getTreeList();
};
const getTreeList = () => {};
const addRoot = () => {
  //新增根节点
  treeInfo.value = {};
  console.log(treeInfo, "info");
  addAndEditRootShow.value = true;
};

const handleNodeClick = (data: any) => {
  treeInfo.value = data;
};
const append = (data: any) => {
  treeInfo.value = data;
  addAndEditRootShow.value = true;
};
const remove = (node, data) => {
  //需要判断你一下是否能被删除
  // 可以删除
  treeInfo.value = data;
  dialogTreeVisible.value = true;
};

const searchTableBtn = () => {};
const addTbale = () => {
  if(treeList.value.length>0){

  }else{
    message("请先创建巡更项目类型", { type: "error" });
  }
};
const resetSearch = () => {
  lisQuery.dataSetName = "";
  init();
};
const handleSizeChange = (val: any) => {
  pagination.pageSize = val;
  lisQuery.limit = val;
  init();
};
const handleCurrentChange = (val: any) => {
  pagination.currentPage = val;
  lisQuery.page = val;
  init();
};

const init = () => {};
const handleUpdate = (row: object) => {};
const handleEditdate = (row: object) => {};
const handleDelete = (row: object) => {
  //需要判断你一下是否能被删除
  // 可以删除
  tableInfo.length = 0;
  Object.assign(tableInfo, row);
  dialogTableVisible.value = true;
};
const handleCancel = () => {
  dialogTreeVisible.value = false;
};
const handSave = () => {};
const handleTableCancel = () => {
  dialogTableVisible.value = false;
};
const handTableSave = () => {};
const handleRefresh = () => {
  getTreeList();
};
// watch(
//   () => defaultExpandedkeys,
//   newForm => {
//     nextTick(() => {
//       let list = document.querySelector(".tree-box");
//       if (list) {
//         const firstNode = list.querySelector(".el-tree-node__content");
//         if (firstNode) {
//           firstNode.click();
//         }
//       }
//     });
//   }
// );

onMounted(() => {
  nextTick(() => {
    if (tree.value) {
      // 使用 setCurrentNode 方法
      const firstNode = tree.value.getNode(treeList.value[0].id);
      if (firstNode) {
        tree.value.setCurrentNode(firstNode);
      }
    }
  });
});
</script>

<template>
  <div class="main">
    <div class="main-left">
      <div class="main-left-top">
        <el-input v-model="name" placeholder="请输入">
          <template #suffix>
            <el-icon class="el-input__icon" @click="searchBtn"
              ><Search
            /></el-icon>
          </template>
        </el-input>
        <el-button class="button" :icon="CirclePlus" @click="addRoot"
          >新增</el-button
        >
      </div>
      <div class="main-left-tree">
        <el-tree
          ref="tree"
          class="tree-box"
          :data="treeList"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="defaultExpandedkeys"
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span>{{ node.label }}</span>
              <div>
                <el-button
                  type="primary"
                  :icon="EditPen"
                  link
                  @click="append(data)"
                />
                <el-button
                  style="margin-left: 4px"
                  type="danger"
                  link
                  :icon="Delete"
                  @click="remove(node, data)"
                />
              </div>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="main-right">
      <div class="main-right-top">
        <div class="main-right-top-left">
          <el-input v-model="lisQuery.dataSetName" placeholder="请输入">
            <template #suffix>
              <el-icon class="el-input__icon" @click="searchTableBtn">
                <Search />
              </el-icon>
            </template>
          </el-input>
          <el-button
            style="margin-left: 8px"
            :icon="Refresh"
            @click="resetSearch"
            >重置</el-button
          >
        </div>
        <div class="main-right-top-right">
          <el-button :icon="CirclePlus" type="primary" @click="addTbale"
            >新增</el-button
          >
        </div>
      </div>
      <div class="main-right-container">
        <PureTableBar title="列表设置" :columns="columns" @refresh="init">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              ref="tableRef"
              row-key="id"
              adaptive
              :adaptiveConfig="{ offsetBottom: 101 }"
              align-whole="center"
              table-layout="auto"
              :loading="listLoading"
              :size="size"
              :data="tableListData"
              :columns="dynamicColumns"
              :pagination="{ ...pagination, size }"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  @click="handleUpdate(row)"
                >
                  查看
                </el-button>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  @click="handleEditdate(row)"
                >
                  修改
                </el-button>
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>

    <!--tree删除-->
    <el-dialog v-model="dialogTreeVisible" title="提示" width="560">
      <div class="title">您确定删除该类型吗?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handSave"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!--    table删除-->
    <el-dialog v-model="dialogTableVisible" title="提示" width="560">
      <div class="title">您确定删除该巡更项目吗?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleTableCancel">取消</el-button>
          <el-button type="primary" @click="handTableSave"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
    <addAndEditRootAialog
      v-if="addAndEditRootShow"
      :visible="addAndEditRootShow"
      :treeInfo="treeInfo"
      @update:visible="addAndEditRootShow = $event"
      @refresh="handleRefresh"
    />
  </div>
</template>

<style scoped lang="scss">
@import url("@/style/common.scss");
.main {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .main-left {
    width: 264px;
    height: 100%;
    background-color: var(--el-bg-color);
    margin-right: 16px;
    &-top {
      margin: 16px;
      .button {
        width: 100%;
        margin-top: 16px;
      }
    }
    &-tree {
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    }
  }
  .main-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    &-top {
      border-radius: 3px 3px 3px 3px;
      background-color: var(--el-bg-color);
      height: 68px;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      &-left {
        display: flex;
        align-items: center;
      }
      &-right {
      }
    }
    &-container {
      flex: 1;
      border-radius: 3px 3px 3px 3px;
      //padding: 16px;
      background-color: var(--el-bg-color);
    }
  }
}
</style>
